<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import type { FormInstance } from "element-plus";
import { regionData } from "@/utils/chinaArea";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    company_name: "",
    address_path: [],
    name: "",
    phone: "",
    code: "",
    establishmenttime: "",
    employee_size: "",
    insured_num: "",
    registered_capital: "",
    national_standard_industry: "",
    address: "",
    scope_of_experience: ""
  })
});

const ruleFormRef = ref<FormInstance>();
const newFormInline = ref(props.formInline);
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :rules="formRules"
      :model="newFormInline"
      label-position="top"
    >
      <div class="dialog">
        <div class="title">
          <div class="line"></div>
          <div class="bt">基础信息</div>
        </div>

        <el-row :gutter="40">
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="公司名称:" prop="company_name">
              <el-input
                v-model="newFormInline.company_name"
                placeholder="请输入公司名称"
                maxlength="50"
                show-word-limit
              />
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="所在地区:" prop="address_path">
              <el-cascader
                v-model="newFormInline.address_path"
                class="w-full!"
                placeholder="请选择"
                :options="regionData"
                :props="{ value: 'label' }"
                clearable
              />
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="法定代表人:" prop="name">
              <el-input
                v-model="newFormInline.name"
                placeholder="请输入法定代表人姓名"
                maxlength="10"
                show-word-limit
              />
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="联系电话:" prop="phone">
              <el-input
                v-model="newFormInline.phone"
                placeholder="请输入联系电话"
                maxlength="11"
                show-word-limit
              />
            </el-form-item>
          </re-col>
        </el-row>
      </div>

      <div class="dialog">
        <div class="title">
          <div class="line"></div>
          <div class="bt">工商信息</div>
        </div>

        <el-row :gutter="40">
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="社会统一信用代码:" prop="code">
              <el-input
                v-model="newFormInline.code"
                placeholder="请输入社会统一信用代码"
                maxlength="18"
                show-word-limit
              />
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="成立时间:" prop="establishmenttime">
              <el-date-picker
                v-model="newFormInline.establishmenttime"
                class="w-full!"
                placeholder="请选择"
              />
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="员工规模:" prop="employee_size">
              <el-input
                type="number"
                v-model="newFormInline.employee_size"
                class="w-full!"
                placeholder="请输入"
              />
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="参保人数:" prop="insured_num">
              <el-input
                type="number"
                v-model="newFormInline.insured_num"
                class="w-full!"
                placeholder="请输入"
              />
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="注册资本:" prop="registered_capital">
              <el-input
                type="number"
                v-model="newFormInline.registered_capital"
                placeholder="请输入"
                clearable
              >
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="所属行业:" prop="national_standard_industry">
              <el-input
                v-model="newFormInline.national_standard_industry"
                class="w-full!"
                placeholder="请输入"
              />
            </el-form-item>
          </re-col>
          <re-col :value="24" :xs="24" :sm="24">
            <el-form-item label="注册地址:" prop="address">
              <el-input
                v-model="newFormInline.address"
                placeholder="请输入公司注册地址"
                clearable
                maxlength="100"
                show-word-limit
              />
            </el-form-item>
          </re-col>
          <re-col :value="24" :xs="24" :sm="24">
            <el-form-item label="经营范围:" prop="scope_of_experience">
              <el-input
                v-model="newFormInline.scope_of_experience"
                maxlength="500"
                :rows="4"
                placeholder="请输入"
                show-word-limit
                type="textarea"
              />
            </el-form-item>
          </re-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.dialog {
  width: 100%;
  border-radius: 7px;
  padding-bottom: 10px;

  .title {
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 50px;

    .line {
      width: 4px;
      height: 15px;
      border-radius: 5px;
      background-color: var(--pure-theme-menu-active-before);
      margin-right: 10px;
    }

    .bt {
      font-size: 14px;
      color: #000;
      font-weight: bold;
    }
  }
}
</style>
